<div class="col-md-8 col-lg-8 col-md-offset-1 col-lg-offset-1">
    <h1>Search Activities</h1>
    <form class="form-inline">
        <div class="form-group">
            <label for="classroomlist">Classroom</label>
            <select ng-init="activities.selectedClassroom = activities.allClassrooms[0]"
                    ng-model="activities.selectedClassroom"
                    ng-options="classroom as classroom.name for classroom in activities.allClassrooms"
                    class="form-control"
                    id="classroomlist"></select>

        </div>
        <div class="form-group">
            <label for="monthlist">Month</label>
            <select ng-model="activities.selectedMonth" class="form-control" id="monthlist">
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
        </div>
        <button ng-click="activities.search()" class="btn btn-default">Search</button>
    </form>
</div>

<div class="col-md-8 col-lg-8 col-md-offset-1 col-lg-offset-1">
    <h1>All Activities</h1>
    <div>
        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">Registered Activities</div>

            <!-- Table -->
            <table class="table">
                <thead>
                <tr>
                    <th>Activity Name</th>
                    <th>Classroom</th>
                    <th>Date</th>
                </tr>
                </thead>
                <tr ng-repeat="activity in activities.allActivities">
                    <td>{{ activity.name }}</td>
                    <td>{{ activity.classroom.name }}</td>
                    <td>{{ activity.date | date:'fullDate' }}</td>
                </tr>
            </table>
        </div>
    </div>
</div>